<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true, title: '建议' }">
    <view :class="[`${prefixCls}-recommendation-container`]">
      <view class="propose">
        <view class="form-list">
          <view class="form-title">
            <span class="star">*</span>
            <span>请选择房间</span>
          </view>
          <view @click="handleSelect">
            <uv-input
              v-model="roomDetail.room_name"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择房间"
              border="none"
              suffixIcon="arrow-right"
              suffixIconStyle="color: #909399"
            ></uv-input>
          </view>
        </view>
        <view class="form-list">
          <view class="form-title">
            <span class="star">*</span>
            <span>建议内容</span>
          </view>
          <uv-textarea style="background: #f8f8f8" v-model="value" border="none" placeholder="请输入建议内容"></uv-textarea>
        </view>
      </view>
      <uv-popup ref="popup" round="5" :closeable="true" :safeAreaInsetBottom="true">
        <view class="room-container">
          <view class="title">请选择房间</view>
          <view class="room-list">
            <view :class="['room-item', { 'active-item': roomDetail.room_id == item.room_id }]" v-for="(item, index) in roomList" :key="index" @click="handleSelectRoom(item)">
              {{ item.room_name }}
            </view>
          </view>
        </view>
      </uv-popup>
      <!--按钮-->
      <view class="btnBase">
        <uv-button text="提交" :disabled="!isSubmit" type="primary" @click="handleSubmit()"></uv-button>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { propose, roomList } from './api'

export default {
  name: 'propose',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      value: '',
      roomDetail: {
        room_id: '',
        room_name: '',
        contract_id: '',
        platform_type: '',
      },
      roomList: [],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
    isSubmit() {
      return this.value != '' && this.roomDetail.room_id != ''
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad() {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    this.getRoomData()
  },
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getRoomData() {
      const { data } = await roomList()
      this.roomList = data
    },
    handleSelect() {
      this.$refs.popup.open('center')
    },
    handleSelectRoom(value) {
      for (let key in this.roomDetail) {
        this.roomDetail[key] = value[key]
      }
      this.$refs.popup.close()
    },
    async handleSubmit() {
      const { room_id } = this.roomDetail
      const { errcode } = await propose({ type: 2, detail: this.value, room_id })
      if (errcode === 0) {
        uni.$uv.toast('操作成功')
        this.$ROUTE.go('/pages/subpackage/recommendation/index')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('recommendation-container')} {
  position: relative;
  // background: #f5f5f5;
  box-sizing: border-box;
  overflow: hidden;
  .propose {
    // background: white;
    padding: 0 16px;
    .form-list {
      .form-title {
        margin: 15px 0;
        font-weight: bold;
        font-size: 16px;
        .star {
          margin-right: 3px;
          color: $uv-price-primary;
        }
      }
    }
  }
  //按钮
  .btnBase {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 20rpx;
    width: 90%;
    padding: 0rpx 40rpx;

    .btn {
      display: flex;
      justify-content: center;
      padding: 30rpx 0rpx;
      background: $uv-primary;
      color: #e0e0e0ff;
      border-radius: 8rpx;
      letter-spacing: 10rpx;
      flex: 1;
    }
  }
  .room-container {
    background: white;
    width: 80vw;
    height: 100%;
    min-height: 450px;
    max-height: 80vh;

    padding: 16px;
    .title {
      text-align: center;
      font-size: 16px;
      line-height: 20px;
      font-weight: bold;
    }
    .room-list {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      height: 100%;
      // min-height: 450px;
      max-height: calc(80vh - 100px);
      margin-top: 20px;
      overflow: auto;
      .room-item {
        width: 100%;
        margin-top: 10px;
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
        font-weight: bold;
        &:first-child {
          margin-top: 0;
        }
      }
      .active-item {
        background: $uv-primary;
        color: white;
      }
    }
  }
}
</style>
